<template>
	<view class="content">
		<view class="qh">
			<view class="qh1">
				<text>A幼儿园校园套餐库存情况</text>
			</view>
			<view class="qh2">
				<image src="../../../static/school/qh.png" mode=""></image>
				<text>切换客户</text>
			</view>
		</view>

		<view class="schooltc" v-for="(item,index) in list">
			<view class="schooltcltitle">
				<text>{{item.tctit}}</text>
			</view>
			<view class="schooltclist">
				<view class="schooltclisttop">
					<view class="schooltclisttop_left">
						<image src="../../../static/my/shoplogo.png" mode=""></image>
					</view>
					<view class="schooltclisttop_right">
						<view class="schooltclisttop_right1">
							<text>A特色课名称</text>
						</view>
						<view class="schooltclisttop_right1">
							<text>商品属性</text>
						</view>
						<view class="schooltclisttop_right1">
							<text>库存数量： 100元</text>
						</view>
						<view class="schooltclisttop_right1">
							<text>可用数量： 40元</text>
						</view>
					</view>
				</view>

				<view class="schooltclistbottom">
					<view class="sctcbt1">
						<button type="default" @click="zjtt()">加减库存</button>
					</view>
					<view class="sctcbt2">
						<button type="default" @click="todetails()">库存详情</button>
					</view>
				</view>
			</view>
			<view class="yc_shop">
				<button type="default">隐藏的0库存商品 ></button>
			</view>

			<view class="yccp_xs">
				<view class="yctitle">
					<text>隐藏的产品</text>
				</view>
				<view class="yclist">
					<view class="yclist1">
						<text>A产品</text>
						<button type="default">显示</button>
					</view>
					<view class="yclist1">
						<text>A产品</text>
						<button type="default">显示</button>
					</view>
				</view>
			</view>


			<view class="bg" v-show="a">
				<view class="bg1">
				</view>
				<view class="bot">
					<view class="bot_top">
						<view class="bot_top_left">
							<image src="../../../static/my/shoplogo.png" mode=""></image>
						</view>
						<view class="bot_top_right">
							<view class="bot_right1">
								<text>A特色课名称</text>
							</view>
							<view class="bot_right1">
								<text>商品属性</text>
							</view>
							<view class="bot_right1">
								<text>库存数量：50件</text>
							</view>
							<view class="bot_right1">
								<text>可用数量：50件</text>
							</view>
						</view>
					</view>

					<view class="bot_ipt">
						<view class="bot_ipt1">
							<text>操作数量</text>
						</view>
						<view class="bot_ipt2">
							<input type="text" value="" placeholder="请输入" />
						</view>
					</view>

					<view class="bot_bt">
						<view class="bot_bt1">
							<button type="default" @click="zj()">增加</button>
						</view>
						<view class="bot_bt2">
							<button type="default">减少</button>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				a: false,
				list: [{
						id: 0,
						tctit: 'A校园套餐',
						kcnmb: '11',
						tclist: [{
							id: 0,
							title: 'A特色课名称',
							type: '商品属性',
							nmb: '100',
							num: '11'
						}]
					},
					{
						id: 0,
						tctit: 'A校园套餐',
						kcnmb: '11',
						tclist: [{
							id: 0,
							title: 'A特色课名称',
							type: '商品属性',
							nmb: '100',
							num: '11'
						}]
					}
				]
			}
		},
		methods: {
			todetails() {
				console.log(111)
				uni.navigateTo({
					url: '/pages/shop/mushop/inventory_details'
				})
			},
			zj() {
				this.a = !this.a
			},
			zjtt(){
				this.a=!this.a
			}
		}
	}
</script>

<style>
	.content {
		width: 750rpx;

		background: #FAFAFA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding-top: 32rpx;
		padding-bottom: 80rpx;
	}

	.qh {
		width: 690rpx;
		height: 104rpx;
		background: #409CFD;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		margin: auto;
	}

	.qh1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-left: 32rpx;
	}

	.qh2 {
		width: 196rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		margin-right: 12rpx;
	}

	.qh2 image {
		height: 28rpx;
		width: 28rpx;
	}

	.qh2 text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
	}

	.schooltc {
		margin-top: 32rpx;
	}

	.schooltcltitle {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		margin-left: 32rpx;
	}

	.schooltclist {
		width: 690rpx;
		height: 368rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 32rpx auto 0;
	}

	.schooltclisttop {
		padding-top: 32rpx;
		display: flex;
	}

	.schooltclisttop_left {
		margin-left: 30rpx;
	}

	.schooltclisttop_left image {
		width: 216rpx;
		height: 216rpx;
	}

	.schooltclisttop_right {
		margin-left: 32rpx;
		height: 216rpx;
	}

	.schooltclisttop_right1 {
		height: 25%;
		display: flex;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	}

	.schooltclistbottom {
		display: flex;
		justify-content: flex-end;
		margin-top: 32rpx;
	}

	.sctcbt1 {
		margin-right: 32rpx;
	}

	.sctcbt1 button {
		width: 176rpx;
		height: 56rpx;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		border: 2rpx solid #409CFD;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 26rpx;
		color: #409CFD;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFFFFF;
	}

	.sctcbt2 {
		margin-right: 32rpx;
	}

	.sctcbt2 button {
		width: 176rpx;
		height: 56rpx;
		background: #409CFD;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 26rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yc_shop {
		width: 334rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 2rpx solid #409CFD;
		margin-left: 32rpx;
	}

	.yc_shop button {
		width: 334rpx;
		height: 80rpx;
		background: #FFFFFF;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.yccp_xs {
		margin-top: 24rpx;
	}

	.yctitle {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		margin-left: 32rpx;
	}

	.yclist {
		display: flex;

	}

	.yclist1 {
		width: 332rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 22rpx auto 0;
	}

	.yclist1 text {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		margin: auto;
	}

	.yclist1 button {
		width: 114rpx;
		height: 64rpx;
		background: #409CFD;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bg {}

	.bg1 {
		background-color: #000000;
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 9;
		top: 0;
		opacity: 0.8;
	}

	.bot {
		position: fixed;
		z-index: 9;
		bottom: 0;
		width: 750rpx;
		height: 616rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 0rpx 0rpx;
		padding-top: 32rpx;
	}

	.bot_top {
		display: flex;
		align-items: center;
	}

	.bot_top_left {
		margin-left: 32rpx;
	}

	.bot_top_left image {
		width: 216rpx;
		height: 216rpx;
	}

	.bot_top_right {
		height: 216rpx;
		margin-left: 48rpx;
	}

	.bot_right1 {
		height: 25%;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
	}

	.bot_ipt {
		display: flex;
		align-items: center;
		margin-top: 48rpx;
	}

	.bot_ipt1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		margin-left: 32rpx;
	}

	.bot_ipt2 {
		width: 460rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 2rpx solid #999999;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
		margin-left: 40rpx;
	}

	.bot_bt {
		display: flex;
		margin-top: 80rpx;

	}

	.bot_bt1 {
		margin-left: 32rpx;
	}

	.bot_bt1 button {
		width: 332rpx;
		height: 88rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		background: #FFFFFF;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #409CFD;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bot_bt2 {
		margin-left: 26rpx;
	}

	.bot_bt2 button {
		width: 332rpx;
		height: 88rpx;
		background: #409CFD;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>